import  { useEffect, useState } from 'react';
import { Card, Input, Select, Button, Space, Table, Modal, Form } from "antd"
import { SearchOutlined } from '@ant-design/icons';
import type { TableProps } from 'antd';
import { addShopInfo, deleteShopInfo, updateShopInfo } from "../api/shop"
import { getBrandList } from "../api/brand"
import Cascader from "@/components/Cascader"
import { state as states } from "@/stores/Merchant"
import { useSnapshot } from 'valtio'
//定义表格数据
const Brand = () => {
    const state = useSnapshot(states)

    interface DataType {
        key: string,
        shopName: string,
        brandname: string,
        areaName: string,
        shopAddress: string,
        name: string,
        phone: string,
        status: string,
        bindShop: string,
    }
    let [searchs, setSearchs] = useState({
        brandname: "",
        areaName: "",
        shopName: "",
    })

    let search = () => {
        state.getData3(searchs)
    }


    let get = () => {

        state.getData3(searchs)

    }

    let [brand, setBrand] = useState([])
    let getBrand = () => {
        getBrandList({}).then((res: any) => {
            setBrand(res.brandNameList)


        })
    }
    useEffect(() => {
        get()
        getBrand()
    }, [state.shopList])

    let columns: TableProps<DataType>['columns'] = [

        {
            title: "店铺名称",
            dataIndex: 'shopName',
            key: 'shopName',
        },
        {
            title: "所属分区",
            dataIndex: 'areaName',
            key: 'areaName',
        },
        {
            title: "所属品牌",
            dataIndex: 'brandname',
            key: 'brandname',
        },
        {
            title: "店铺地址",
            dataIndex: 'shopAddress',
            key: 'shopAddress',
        },
        {
            title: "联系人",
            dataIndex: 'name',
            key: 'name',
        },

        {
            title: "电话",
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: "营业状态",
            dataIndex: 'status',
            key: 'status',
            render: (_, record: any) => (
                <Space>
                    {record?.status == 1 ? "营业中" : "休息中"}
                </Space>
            )
        },
        {
            title: "操作",

            render: (_, record) => (
                <Space size="middle">

                    <a onClick={() => {
                        backShow(record)
                    }}>编辑</a>
                    <a onClick={() => {
                        del(record)
                    }}>删除</a>
                </Space>
            ),
        },


    ]

    let del = (data: any) => {
        deleteShopInfo(data)
        get()
    }
    const [modalOpen, setModalOpen] = useState<boolean>(false);

    let [form, setForm] = useState<any>({
        key: "",
        shopName: "",
        brandname: "请选择",
        areaName: "请选择",
        shopAddress: "",
        name: "",
        phone: "",
        status: 1,
        bindShop: "",
        shopLongitude: 0.0000,
        shopLatitude: 0.0000,
        detailAddress: "",
    })

    let add = () => {
        addShopInfo({
            shopName: form.shopName,
            brandname: form.brandname,
            areaName: form.areaName,
            shopAddress: form.shopAddress,
            name: form.name,
            phone: form.phone,
            status: form.status,
            bindShop: form.bindShop,
            shopLongitude: form.shopLongitude,
            shopLatitude: form.shopLatitude,
            detailAddress: form.detailAddress,

        }).then((res: any) => {
            if (res.code === 200) {
                get();
                setModalOpen(false);
                setForm({
                    key: "",
                    shopName: "",
                    brandname: "请选择",
                    areaName: "请选择",
                    shopAddress: "",
                    name: "",
                    phone: "",
                    status: 1,
                    bindShop: "",
                    shopLongitude: 0.0000,
                    shopLatitude: 0.0000,
                    detailAddress: "",
                })
            }
        })
    }



    let backShow = (data: any) => {
        setModalOpen(true)
        setForm(data)
    }

    const handleUpdate = () => {
        form.status = form.status === "正在营业" ? 0 : 1;
        updateShopInfo(form).then((res: any) => {
            if (res.code === 200) {
                get();
                setModalOpen(false);
            }
        });
    };

    return (
        <div className='m=auto w-[100%] m-t-5'>
            <Card title='店铺筛选' className='m-auto  w-[90%] rounded-none p-0'>
                <div className='flex justify-between  p-5 w-220'>
                    <div style={
                        { display: "flex", height: "30px", lineHeight: '30px', padding: 0 }
                    }
                    >
                        <p className='m-0'>品牌名称：</p>
                        <Select
                            className='rounded-none'
                            defaultValue="请选择"
                            style={{ width: 120 }}
                            onChange={(e) => {
                                setSearchs({
                                    ...searchs,
                                    brandname: e
                                })
                            }

                            }
                            options={brand}
                        />
                    </div>
                    <div style={
                        { display: "flex", height: "30px", lineHeight: '30px', padding: 0 }
                    }
                    >
                        <p className='m-0'>所属分区：</p>
                        <Select
                            className='rounded-none'
                            defaultValue="请选择"
                            style={{ width: 120 }}
                            onChange={(e) => {
                                setSearchs({
                                    ...searchs,
                                    areaName: e
                                })
                            }}
                            options={[...state.areaCate]}
                        />
                    </div>
                    <div style={
                        { display: "flex", height: "30px", lineHeight: '30px', padding: 0 }
                    }
                    >
                        <p className='m-0'>商户名称：</p>
                        <Input placeholder="请输入商户名称"
                            value={searchs.shopName}
                            onChange={(e) => {
                                setSearchs({ ...searchs, shopName: e.target.value })
                            }}
                            className='w-40 rounded-none m-l-2 m-r-10' />
                        <Button type="primary" className='rounded-none' icon={<SearchOutlined />}
                            onClick={async () => {

                                await search()

                            }}
                        >查询</Button>
                    </div>
                </div>            </Card >            <Card className='w-[90%] m-auto mt-5 rounded-none'>                <div className='flex justify-between items-center'>
                    <p>共有{state.shopList.length}条记录</p>                    <Button className='rounded-none' type='primary'
                        onClick={() => {
                            setModalOpen(true)
                            setForm({
                                key: "",
                                shopName: "",
                                brandname: "请选择",
                                areaName: "请选择",
                                shopAddress: "",
                                name: "",
                                phone: "",
                                status: 1,
                                bindShop: "",
                                shopLongitude: 0.0000,
                                shopLatitude: 0.0000,
                                detailAddress: "",
                            })
                        }}
                    >添加店铺</Button>
                </div>
                <Table className='rounded-none' columns={columns}
                    bordered
                    dataSource={state.shopList}
                    pagination={{
                        defaultPageSize: 5, // 设置每页默认显示的行数
                        total: state.shopList.length,
                        showSizeChanger: true, // 不显示每页显示数量的选择器
                        showQuickJumper: false, // 不显示快速跳转到某一页的输入框
                        pageSizeOptions: ['5', '10', '20'],
                    }}
                />
            </Card>


            {/* 修改弹出框 */}
            <Modal
                style={{ borderRadius: 0 }}
                title="店铺授权"
                centered
                open={modalOpen}
                onOk={handleUpdate}
                onCancel={() => setModalOpen(false)}
                footer={[
                    <Button key="back" onClick={() => {
                        setModalOpen(false)

                    }
                    }
                    >取消</Button>,
                    <Button key="submit" type="primary" onClick={() => {
                        if (form._id) {

                            handleUpdate()

                        } else {
                            add()
                        }

                    }}>确定</Button>,
                ]}>
                <Form
                    name="basic" autoComplete="off" style={{ padding: '20px' }}>
                    <Form.Item label=" 店铺名称">
                        <Input
                            value={form.shopName}
                            onChange={(e) => {
                                setForm({ ...form, shopName: e.target.value })
                            }}
                            placeholder='请输入店铺名称'
                        />
                    </Form.Item>
                    <Form.Item label=" 所属品牌">
                        <Select

                            defaultValue="请选择"
                            value={form.brandname}

                            onChange={
                                (e) => {
                                    setForm({ ...form, brandname: e })

                                }
                            }
                            options={[...state.brandCate]}
                        />
                    </Form.Item>
                    <Form.Item label=" 所属分区">
                        <Select

                            defaultValue="请选择"
                            value={form.areaName}

                            onChange={(e) => {
                                setForm({ ...form, areaName: e })
                            }}
                            options={[...state.areaCate]}
                        />
                    </Form.Item> <Form.Item label=" 联系人">
                        <Input placeholder="请输入联系人"
                            value={form.name}
                            onChange={(e) => {
                                setForm({ ...form, name: e.target.value })
                            }}
                        /></Form.Item>
                    <Form.Item label=" 手机号">
                        <Input value={form.phone}
                            placeholder='请输入手机号'
                            onChange={(e) => {
                                setForm({ ...form, phone: e.target.value })
                            }} /> </Form.Item>
                    <Form.Item label=" 店铺地址">
                        <div>
                            <div className='h-15'>
                                <Cascader style={{ width: "94%" }} value={form.shopAddress} onChange={(e) => {
                                    setForm({ ...form, shopAddress: e })
                                }}></Cascader> </div> <div>
                                <Input placeholder='详细地址'
                                    value={form.detailAddress}
                                    onChange={(e) => {
                                        setForm({ ...form, detailAddress: e.target.value })
                                    }}
                                ></Input></div>
                        </div>
                    </Form.Item>

                </Form> </Modal></div >
    );
};
export default Brand;